<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>账户管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${path }/resources/layui/css/layui.css"
	media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style type="text/css">
	.layui-table-cell {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
</style>
</head>
<body>

	<div class="accountTableToobar">
		<div class="layui-inline">
			<input class="layui-input" name="accountName" id="accountName"
				placeholder="账户名" autocomplete="off">
		</div>
		<div class="layui-inline">
			<input class="layui-input" name="nickName" id="nickName"
				placeholder="昵称" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn" onclick="reload()">刷新</button>
	</div>
	<table class="layui-hide" id="accountTable" lay-filter="user"></table>

	<script type="text/html" id="isLock">
  	<!-- 这里的 checked 的状态只是演示 -->
  	<input type="checkbox" name="isLock" value="{{d.accountId}}" title="锁定" lay-filter="isLock" {{ d.isLock != 0 ? 'checked' : '' }}>
	</script>

	<script src="${path }/resources/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		var table;
		layui.use('table', function() {
			table = layui.table
			 ,form = layui.form;
			//方法级渲染
			table.render({
				elem : '#accountTable',
				method : 'post',
				//,where: {token: 'sasasas', id: 123}
				url : '${path}/account/selectAccountList',
				even : true, //开启隔行背景
				cols : [ [ {
					checkbox : true,
					fixed : true
				}, {
					field : 'accountId',
					title : 'ID',
					width : 80,
					sort : true
				}, {
					field : 'accountName',
					title : '账户名',
					minWidth : 160
				}, {
					field : 'nickName',
					title : '昵称',
					minWidth : 160,
					sort : true
				}, {
					field : 'headImg',
					title : '头像',
					minWidth : 80,
					style:"height:50px",
					templet: '#headImg'
				}, {
					field : 'isLock',
					title : '是否锁定',
					width : 100,
					templet: '#isLock'
				}, {
					field : 'createTime',
					title : '创建时间',
					sort : true,
					minWidth : 180
				}, {
					field : 'updateTime',
					title : '最后更新时间',
					sort : true,
					minWidth : 180
				} ] ],
				id : 'layui_table_account',
				page : true,
				limits : [ 10,20,30, 60, 90, 150, 300 ],
				limit : 20, //默认采用60
				height : 'full-58',
// 				width : '100%'
			});

			var $ = layui.$, active = {
				reload : function() {
					var accountName = $('#accountName');
					var nickName = $('#nickName');

					table.reload('layui_table_account', {
						where : {
							accountName : accountName.val(),
							nickName : nickName.val()
						}
					});
				}
			};

			$('.accountTableToobar .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			
			 //监听锁定操作
			  form.on('checkbox(isLock)', function(obj){
			    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
			    layer.tips("这儿可以向后台发送请求", obj.othis);
			  });
			
		});
		//重新加载
		function reload(){
			table.reload('layui_table_account');
		}
	</script>
	<script type="text/html" id="headImg">
  		<a href="{{d.headImg}}" target="_blank">
			<img width="50" height="50" alt="头像" src="{{d.headImg}}">
		</a>
	</script>
	<%--
<script id="isLock" type="text/html">
  {{#  if(d.isLock === 0){ }}
    <span style="color: #F581B1;">正常</span>
  {{#  } else { }}
    	锁定
  {{#  } }}
</script>
	 --%>
</body>
</html>